<template>
  <div class="storeorder-page page-main">
    <search-form :model="searchParams" @search="search">
      <a-form-item label="时间选择：" class="width100">
        <a-radio-group v-model:value="searchParams.dateLimit" button-style="solid" class="mr20"
          @change="selectChange(searchParams.dateLimit)">
          <a-radio-button v-for="(item, i) in DAYS_TYPE" :key="i" :value="item.value">
            {{ item.label }}
          </a-radio-button>
        </a-radio-group>
        <a-range-picker v-model:value="timeVal" value-format="YYYY-MM-DD" />
        <!-- <a-date-picker
          v-model:value="timeVal"
          value-format='YYYY/MM/DD'
          format="yyyy-MM-dd"
          type="daterange"
          placement="bottom-end"
          placeholder="自定义时间"
          style="width: 250px"
          @change="onchangeTime"
        /> -->
      </a-form-item>
      <a-form-item label="选择门店：">
        <a-select v-model:value="searchParams.storeId" filterable placeholder="请选择" class="selWidth" clearable
          @change="search(false)">
          <a-select-option v-for="item in stores" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="关键字：">
        <a-input v-model:value="searchParams.keywords" placeholder="请输入姓名、电话、订单ID" class="selWidth" clearable />
      </a-form-item>
    </search-form>
    <div class="table-toolbar">
      <add-button @click="add()" />
    </div>
    <g-table ref="tableRef" :columns="columns" :api="getPageList" :params="searchParams" />

    <storeorderDetail v-model:value:visible="visible" :data="activeRow" @change="search(false)" />
  </div>
</template>

<script setup lang="tsx">
import { storeorderDel, getPageList } from "./api";
import type { Istoreorder } from "./entity";
import storeorderDetail from "./detail.vue";
import { DAYS_TYPE } from "@/utils/constant";
import type { Istore } from "../address/entity";
import { storeListApi } from "../collateUser/api";
const searchParams = reactive({
  prop: "",
  storeId: "",
  keywords: "",
  dateLimit: "",
  date: "",
});

let visible = $ref(false);
onMounted(() => storeList());
const { tableRef, columns, search } = useTable<Istoreorder>([
  { title: "订单号", width: 100, dataIndex: "orderId" },
  { title: "用户信息", width: 100, dataIndex: "realName" },
  { title: "实际支付", width: 100, dataIndex: "payPrice" },
  { title: "核销员", width: 100, dataIndex: "clerkName" },
  { title: "核销门店", width: 100, dataIndex: "storeName" },
  { title: "支付状态", width: 100, dataIndex: "statusStr" },
  { title: "添加时间", width: 100, dataIndex: "createTime" },
  {
    title: "操作",
    dataIndex: "op",
    customRender: ({ record }) => (
      <>
        <table-button onClick={() => add(record)}>编辑</table-button>
        <confirm-button danger onClick={() => remove(record)}>
          删除
        </confirm-button>
      </>
    ),
  },
]);
let timeVal = $ref<string[]>(["", ""]);
let activeRow = $ref<Partial<Istoreorder>>({});
function add(row: Partial<Istoreorder> = {}) {
  activeRow = { ...row };
  visible = true;
}
function onchangeTime(e: string[]) {
  timeVal = e;
  searchParams.dateLimit = e ? e.join(",") : "";
  search(false);
}
let stores = $ref<Istore[]>([]);
function storeList() {
  let artFrom = {
    page: 1,
    limit: 9999,
    status: "1",
    keywords: "",
  };
  storeListApi(artFrom).then((res) => {
    stores = res.list;
  });
}
// 选择时间
function selectChange(tab: string) {
  searchParams.date = tab;
  timeVal = [];
  search(false);
}
function remove({ id }: Istoreorder) {
  storeorderDel(id as number).then(() => {
    AntMessage.success("已删除");
    search(false);
  });
}
</script>

<style lang="scss"></style>
